<template>
  <div>
    <a-button type="primary" @click="showDrawer()">
      Open
    </a-button>
    <a-drawer title="Multi-level drawer" width="520" :closable="false" :visible="visible" @close="onClose()">
      <a-button type="primary" @click="showChildrenDrawer()">
        Two-level drawer
      </a-button>
      <a-drawer title="Two-level Drawer" width="320" :closable="false" :visible="childrenDrawer" @close="onChildrenDrawerClose()">
        <a-button type="primary" @click="showChildrenDrawer()">
          This is two-level drawer
        </a-button>
      </a-drawer>
      <div :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }">
        <a-button style="marginRight: 8px" @click="onClose()">
          Cancel
        </a-button>
        <a-button type="primary" @click="onClose()">
          Submit
        </a-button>
      </div>
    </a-drawer>
    <div>
      <a-button @click="() => openNotificationWithIcon('success')">
        Success
      </a-button>
      <a-button @click="() => openNotificationWithIcon('info')">
        Info
      </a-button>
      <a-button @click="() => openNotificationWithIcon('warning')">
        Warning
      </a-button>
      <a-button @click="() => openNotificationWithIcon('error')">
        Error
      </a-button>
      <a-button type="primary" @click="openNotificationIcon">
        Open the notification box
      </a-button>
    </div>

    <a-popconfirm title="Are you sure？">
      <a-icon slot="icon" type="question-circle-o" style="color: red" />
      <a href="#">Delete</a>
    </a-popconfirm>

    <div>
      <a-progress :percent="percent" />
      <a-button-group>
        <a-button icon="minus" @click="decline()" />
        <a-button icon="plus" @click="increase()" />
      </a-button-group>
    </div>
    <a-result status="success" title="Successfully Purchased Cloud Server ECS!" sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.">
      <template #extra>
        <a-button key="console" type="primary">
          Go Console
        </a-button>
        <a-button key="buy">
          Buy Again
        </a-button>
      </template>
    </a-result>
    <div class="article">
      <a-skeleton :loading="loading">
        <div>
          <h4>Ant Design Vue, a design language</h4>
          <p>
            We supply a series of design principles, practical patterns and high quality design
            resources (Sketch and Axure), to help people create their product prototypes beautifully
            and efficiently.
          </p>
        </div>
      </a-skeleton>
      <a-button @click="showSkeleton()">
        Show Skeleton
      </a-button>
    </div>
    <div>
      <a-spin tip="Loading...">
        <div class="spin-content">
          我的描述文案是自定义的。。。
        </div>
      </a-spin>
    </div>
    <div>
      <a-back-top id="components-back-top-demo-custom" :visibilityHeight="10">
        <div class="ant-back-top-inner">
          UP
        </div>
      </a-back-top>
    </div>
    <div>
      Text
      <a-divider type="vertical" />
      <a href="#">Link</a>
      <a-divider type="vertical" />
      <a href="#">Link</a>
    </div>
    <a-divider orientation="left">
      Left Text
    </a-divider>
  </div>
</template>
<style scoped>
#components-back-top-demo-custom .ant-back-top {
  bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: #1088e9;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
</style>
<script>
export default {
  data() {
    return {
      visible: false,
      childrenDrawer: false,
      percent: 0,
        loading: false,
    };
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    showChildrenDrawer() {
      this.childrenDrawer = true;
    },
    onChildrenDrawerClose() {
      this.childrenDrawer = false;
    },
    openNotificationWithIcon(type) {
      this.$notification[type]({
        message: 'Notification Title',
        description:
          'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      });
    },
     openNotificationIcon() {
      this.$notification.open({
        message: 'Notification Title',
        description:
          'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        icon: <a-icon type="smile" style="color: #108ee9" />,
      });
    },
     increase() {
      let percent = this.percent + 10;
      if (percent > 100) {
        percent = 100;
      }
      this.percent = percent;
    },
    decline() {
      let percent = this.percent - 10;
      if (percent < 0) {
        percent = 0;
      }
      this.percent = percent;
    },
    showSkeleton() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 3000);
    },
  },
};
</script>
